<template>
  <div class="main-box">
    <TreeFilter
      label="name"
      title="商品分类"
      :data="treeFilterData"
      :default-value="initParam.setId"
      @change="changeTreeFilter"
    />
    <div class="table-box">
      <ProTable
        ref="proTable"
        title="商品列表"
        row-key="goodsSetId"
        :indent="30"
        :columns="columns"
        :request-api="getGoodsTreeEntity"
        :request-auto="false"
        :init-param="initParam"
        :search-col="{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3 }"
      >
        <!-- 表格 header 按钮 -->
        <template #tableHeader>
          <el-button type="primary" :icon="CirclePlus" @click="openDrawerAddCustom()">新增商品</el-button>
          <el-button type="primary" :icon="CirclePlus" plain @click="openDialogList()">新增一级分类</el-button>
          <el-button type="primary" :icon="CirclePlus" plain @click="openDialogSet()">新增二级分类</el-button>
        </template>
        <!-- 表格操作 -->
        <template #operation="scope">
          <el-button type="primary" link :icon="View" @click="openDrawerShow('查看', scope.row)">查看</el-button>
          <el-button type="primary" link :icon="EditPen" @click="openDrawerVendor('编辑', scope.row)">编辑</el-button>
        </template>
      </ProTable>
      <SetDialog ref="dialogRefSet" />
      <ListDialog ref="dialogRefList" />
      <EditDrawer ref="drawerRefEdit" />
      <ShowDrawer ref="drawerRefShow" />
      <AddDrawer ref="drawerRefAdd" />
      <ImportExcel ref="dialogRef" />
    </div>
  </div>
</template>
<script setup lang="ts" name="useSelectFilter">
import { ref, onMounted, reactive } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import ImportExcel from "@/components/ImportExcel/index.vue";
import EditDrawer from "./components/EditDrawer.vue";
import TreeFilter from "@/components/TreeFilter/index.vue";
import ShowDrawer from "./components/ShowDrawer.vue";
import AddDrawer from "./components/AddDrawer.vue";
import ListDialog from "./components/ListDialog.vue";
import SetDialog from "./components/SetDialog.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { CirclePlus, EditPen, View } from "@element-plus/icons-vue";
import { addGoodsEntity, editGoods, getGoodsListTree, addGoodsList, addGoodsSet } from "@/api/modules/good";
import { Good } from "@/api/interface";
import { getGoodsTreeEntity } from "@/api/modules/good";
import { tfLabel } from "@/utils/serviceDict";

// 获取用户角色字典
onMounted(() => {
  getTreeFilter();
});

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<ProTableInstance>();

// 表格配置项
const columns: ColumnProps[] = [
  { prop: "goodsId", label: "商品id", width: 80, search: { el: "input" } },
  { prop: "goodsName", label: "商品名", width: 160, search: { el: "input" } },
  { prop: "measureUnit", label: "计量单位", width: 110 },
  { prop: "goodsPrice", label: "商品原价", width: 110 },
  { prop: "goodsModel", label: "商品型号", width: 120 },
  { prop: "vendorInfo.vendorName", label: "供应商名称", search: { el: "input" }, width: 120 },
  { prop: "optReturn", label: "可否退货", enum: tfLabel, tag: true, width: 110 },
  { prop: "optReplace", label: "可否换货", enum: tfLabel, tag: true, width: 110 },
  { prop: "goodsRemark", label: "商品备注信息", width: 120 },
  { prop: "operation", label: "操作", width: 300, fixed: "right" }
];

interface initParam {
  setId?: number | undefined;
  name: string;
  level: number;
}

const initParam = reactive<initParam>({ name: "", level: -1 });

const treeFilterData = ref<any>([]);
const getTreeFilter = async () => {
  const { data } = await getGoodsListTree();
  treeFilterData.value = data;
  initParam.setId = undefined;
  initParam.level = 0;
};

// 树形筛选切换
const changeTreeFilter = (val: any) => {
  proTable.value!.pageable.current = 1;
  initParam.setId = val.id;
  initParam.level = val.level;
};

const drawerRefEdit = ref<InstanceType<typeof EditDrawer> | null>(null);
const openDrawerVendor = (title: string, row: Partial<Good.ReqGoodsEntity> = {}) => {
  const params = {
    title,
    isView: title === "查看",
    row: { ...row },
    api: title === "新增" ? addGoodsEntity : title === "编辑" ? editGoods : undefined,
    getTableList: proTable.value?.getTableList
  };
  drawerRefEdit.value?.acceptParams(params);
};

const drawerRefShow = ref<InstanceType<typeof ShowDrawer> | null>(null);
const openDrawerShow = (title: string, row: Partial<Good.ReqGoodsEntity> = {}) => {
  const params = {
    title,
    isView: title === "查看",
    row: { ...row },
    api: undefined,
    getTableList: proTable.value?.getTableList
  };
  drawerRefShow.value?.acceptParams(params);
};

const drawerRefAdd = ref<InstanceType<typeof AddDrawer> | null>(null);
const openDrawerAddCustom = () => {
  const params = {
    getTableList: proTable.value?.getTableList
  };
  drawerRefAdd.value?.acceptParams(params);
};

const dialogRefList = ref<InstanceType<typeof ListDialog> | null>(null);
const openDialogList = () => {
  const params = {
    title: "新增一级分类",
    isView: true,
    row: {},
    api: addGoodsList
  };
  dialogRefList.value?.openDialog(params);
};

const dialogRefSet = ref<InstanceType<typeof SetDialog> | null>(null);
const openDialogSet = () => {
  const params = {
    title: "新增二级级分类",
    isView: true,
    row: {},
    api: addGoodsSet
  };
  dialogRefSet.value?.openDialog(params);
};
</script>
